Add the core concepts image for the how novu works page #902
Conversation
✅ Deploy Preview for docs-novu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAn image depicting "How Novu works" was inserted into the documentation, positioned after the high-level architecture description and before the "Organization and environments" section. No other content or structure was changed. Changes
Estimated code review effort1 (~2 minutes) Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/how-novu-works.pngis excluded by!**/*.png
📒 Files selected for processing (1)
content/docs/platform/how-novu-works.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
|  | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Leverage the MDX <Image /> (or framework-specific) component for better asset handling
Using bare markdown for images bypasses the build-time optimizations (lazy-loading, responsive sizes, hashing, CDN integration) provided by the doc site’s image component. Consider:
-import { Step, Steps } from '@/components/steps';
+import { Step, Steps } from '@/components/steps';
+import Image from '@/components/Image';-
+<Image
+ src="/images/how-novu-works.png"
+ alt="High-level diagram of how Novu orchestrates notification workflows"
+ width={1200}
+ height={520}
/>Benefits: smaller bundles, automatic loading="lazy", and explicit dimensions preventing layout shift.
🏁 Script executed:
#!/bin/bash
# Verify that the referenced asset actually exists in the repo
fd -H how-novu-works.pngLength of output: 114
Leverage the MDX <Image /> component for optimized asset handling
To benefit from lazy-loading, responsive sizing, hashing and CDN integration—and to prevent layout shifts—please replace the raw markdown image with your project’s <Image /> component:
• File: content/docs/platform/how-novu-works.mdx
-import { Step, Steps } from '@/components/steps';
+import { Step, Steps } from '@/components/steps';
+import Image from '@/components/Image';-
+<Image
+ src="/images/how-novu-works.png"
+ alt="High-level diagram of how Novu orchestrates notification workflows"
+ width={1200}
+ height={520}
/>The asset lives at public/images/how-novu-works.png. Using <Image /> ensures loading="lazy" by default and fixes dimensions to eliminate layout shifts.
🤖 Prompt for AI Agents
In content/docs/platform/how-novu-works.mdx around lines 25 to 26, replace the
raw markdown image syntax with the project's <Image /> component to enable
lazy-loading, responsive sizing, hashing, and CDN integration. Import the <Image
/> component if not already imported, then use it to render the image located at
public/images/how-novu-works.png, ensuring to specify width and height
attributes to prevent layout shifts.
Summary by CodeRabbit